今天來探索一下有關CSS的重要概念
對於進入vue之前，要學習如何動態控制CSS
也就是可以根據不同的版面大小，資料內容，操作狀態來控制樣式的呈現。
在以往網頁在CSS設定之後，基本上就固定了，
若要動態改變，就需要編寫JS程式碼來控制
但是如果之後有樣式而修改時，就要進到程式碼找出控制的那段程式或是條件設定
一般的網頁需求，可能這樣的狀態還算可以應付，
但是一旦網站系統規模變大之後，
就變得不容易分工及維護了
這也就是vue想要解決的問題
因此，除了樣式本身與設計排版有關的學習之外
這篇主要想關注的是有關CSS的動態控制的問題
哪些CSS需要動態控制呢？
有以下3個方向來探索
版面大小，資料內容，操作狀態這三個方向
先來了解一下幾個有@開頭的用法，稱為 At-rules
可以參考MDN有關At-rules的網頁說明
https://developer.mozilla.org/en-US/docs/Web/CSS/At-rule
基本得語法是 @identifier (RULE);
跟其他CSS樣式屬性一樣，是寫在.css檔案中
@charset "utf-8";
是設定網頁的字集是 utf-8
@import url("my-imported-styles.css");
@import "custom.css";
是匯入外部的css檔案，要注意的是 @import 要放在css檔的最開頭的地方
外部的css檔案 可以用url()的方式，也可以直接是檔案名稱
@import url("fineprint.css") print;
@import url("bluish.css") print, screen;
@import "common.css" screen;
@import url("landscape.css") screen and (orientation: landscape);
以上是指在符合後面的media條件時，才匯入css檔案
@import url("gridy.css") supports(display: grid) screen and (max-width: 400px);
@import url("flexy.css") supports(not (display: grid) and (display: flex)) screen and (max-width: 400px);
以上是指在符合後面的顯示條件時，才匯入css檔案
@import url("whatever.css") supports((selector(h2 > p)) and (font-tech(color-COLRv1)));
以上是指在符合後面的selector條件時，才匯入css檔案
@import "theme.css" layer(utilities);
以上是指將css檔案匯入至名為utilities的layer
media條件 就是 media queries
可以參考一下MDN的說明
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries
在此有看到幾個名詞及功能
media queries, screen, print
supports(), selector(), font-tech(), layer()
display: grid, display: flex, max-width: 400px
media queries就是用來設定樣式要作用在什麼樣的media條件下
通常會用在
@media and @import 的at-rules中
<style>, <link>, <source> 等的標籤中
還有屬性有media的標籤中，像是<div media=screen></div>
其中可以設定的media queries的條件有
Media types -> all, print, screen -> 可以搭配 not 或 only 等條件
screen -> 是指一般的螢幕連續顯示模式
print -> CSS paged media 是指在螢幕上以列印分頁顯示模式
html
<div>Box 1</div>
<div>Box 2</div>
<div>Box 3</div>
body {
display: flex;
}
div {
background: yellow;
width: 200px;
height: 200px;
margin: 0.5rem;
padding: 0.5rem;
}
@media (orientation: landscape) {
body {
flex-direction: row;
}
}
@media (orientation: portrait) {
body {
flex-direction: column;
}
}
@media (orientation: landscape)
是指在橫式觀看狀態下的css樣式
在新版的 Media Queries Level 4 規範
有支援這個語法
@media (height > 600px) {
body {
line-height: 1.4;
}
}
@media (400px <= width <= 700px) {
body {
line-height: 1.4;
}
}
網頁視窗觀看尺寸條件設定，可以有比較的條件語法
原本是像這樣
@media only screen and (min-width: 320px) and (max-width: 480px) and (resolution: 150dpi) {
body {
line-height: 1.4;
}
}
這2個不是很直覺
min-width: 320px -> 是指大於320px的尺寸
max-width: 480px -> 是指小於480px的尺寸
可以改寫為
@media only screen and (width > 320px) and (width < 480px) and (resolution: 150dpi) {
body {
line-height: 1.4;
}
}
接下來是 @supports 是指如果瀏覽器有支援樣式屬性，則可設定以下樣式，稱為feature query
https://developer.mozilla.org/en-US/docs/Web/CSS/@supports
html
<body>
<div>Box 1</div>
<div>Box 2</div>
<div>Box 3</div>
<ul class="flex-container">
<li><a href="#">Index</a></li>
<li><a href="#">About me</a></li>
<li><a href="#">Contact</a></li>
</ul>
<script>
</script>
</body>
style
<style>
@supports (display: flex) {
div {
background:blue;
color:darkgoldenrod;
}
a {
color:darkgoldenrod;
}
}
@media (orientation: landscape) {
body {
flex-direction: row;
}
}
@media (orientation: portrait) {
body {
flex-direction: column;
}
}
body {
display: flex;
}
div {
background:yellow;
width: 200px;
height: 200px;
margin: 0.5rem;
padding: 0.5rem;
}
</style>
以上是指 如果瀏覽器有支援display:flex的話，樣式就採用以下設定
div {
background:blue;
color:darkgoldenrod;
}
a {
color:darkgoldenrod;
}
但是如果 後面的樣式有重覆設定的話，會替代之前的樣式
因此樣式出現的順序就很重要了
//----
接下是 @keyframes
@keyframes slidein {
from {
transform: translateX(0%);
}
to {
transform: translateX(100%);
}
}
上面的css是指設定一個slidein的 @keyframes，from是開始的狀態，to是結束的狀態
@keyframes identifier {
0% {
top: 0;
left: 0;
}
30% {
top: 50px;
}
68%,
72% {
left: 50px;
}
100% {
top: 100px;
left: 100%;
}
}
也可以用百分比的方式表示不同的動態變化階段
@keyframes important1 {
from {
left: 50px;
}
50% {
margin-top: 150px !important;
} /* 忽略 */
to {
margin-top: 100px;
}
}
!important 是指這個屬性有最高的優先權，也就是說如果有設定相同的屬性時，
有!important的屬性就不會被取代
不過在 @keyframes 的屬性設定中，加上 !important 反而是要被忽略掉
參考MDN的說明
https://developer.mozilla.org/en-US/docs/Web/CSS/important
a {
color: red;
transition: all 1s linear;
}
a:hover {
font-size: 200%;
}
這個效果是游標停在連結上方時，文字會轉場到2倍大，然後停在2倍的狀態
直到游標移出連結，文字再轉場到原本的大小
a {
color: red;
}
a:hover {
animation: important1 1s infinite;
}
@keyframes important1 {
0% {
font-size: 100%;
}
50% {
font-size: 200%;
}
100% {
font-size: 100%;
}
}
這個效果是游標停在連結上方時，文字會產生放大到2倍大再縮小回原大小的動畫，而且會反覆執行下去，
直到游標移出連結，文字點到原本的大小，同時動畫停止
以上可看到有2種方法可以來表現轉場 transition: 或是 動畫 animation: 效果
//------
以下有3個容易混淆的單字及作用
transform: 是指轉換，一般有平移translate，旋轉rotate，縮放scale
transition: 是指轉場，就是從一個樣式狀態轉換到另一個樣式狀態的方式，像是轉換的速度，時間
animation: 是指動畫，也可以說是樣式狀態轉換，只是比transition多了更多的階段的樣式設定
translate() -> 是指平移
rotate() -> 是指旋轉
scale() -> 是指縮放
最後整理一下
@media
@import
@supports
@keyframes
這些所謂的 At-rules，
在網頁的RWD或是動態變換，都發揮很重要的效果
iThome鐵人賽
看影片追技術